<template>
    <div class="ratingselect" ref="ratingselect">
      <div class="rating-type border-1px">
        <span @click="selectedType(2,$event)" class="block all" :class="{'active':selectType===2}">
          {{desc.all}}<span class="count">{{ratings.length}}</span></span>
        <span @click="selectedType(0,$event)" class="block positive" :class="{'active':selectType===0}">
          {{desc.positive}}<span class="count">{{positives.length}}</span></span>
        <span @click="selectedType(1,$event)" class="block nagative" :class="{'active':selectType===1}">
          {{desc.nagative}}<span class="count">{{nagatives.length}}</span></span>
      </div>
      <div @click="toggleContent($event)" class="switch" :class="{'on': onlyContent}">
        <i class="icon-check_circle"></i>
        <span class="switch-text">只看有内容的评价</span>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">

  const POSITIVE = 0;
  const NAGATIVE = 1;
  const ALL = 2;

    export default {
      props: {
        ratings: {
          type: Array,
          default() {
            return [];
          }
        },
        selectType: {
          type: Number,
          default: ALL
        },
        onlyContent: {
          type: Boolean,
          default: false
        },
        desc: {
          type: Object,
          default() {
            return {
              all: '全部',
              positive: '满意',
              nagative: '不满意'
            };
          }
        }
      },
      computed: {
        positives() {
          return this.ratings.filter((rating) => {
            return rating.rateType === POSITIVE;
          });
        },
        nagatives() {
          return this.ratings.filter((rating) => {
            return rating.rateType === NAGATIVE;
          });
        }
      },
      methods: {
        selectedType(type, e) {
          if (!e._constructed) {
            return;
          }
//          子组件不能直接修改父组件的值
//          this.seleceType = type;
//          给父组件派发事件
          this.$emit('select', type);
        },
        toggleContent(e) {
          if (!e._constructed) {
            return;
          }
//          this.onlyContent = !this.onlyContent;
          this.$emit('toggle', this.onlyContent);
        }
      }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin.styl';
  .ratingselect
    .rating-type
      margin: 0 18px
      padding: 18px 0
      font-size: 0
      border-1px(rgba(7,17,27,.1))
      .block
        display: inline-block
        margin-right: 8px
        padding: 8px 12px
        line-height: 16px
        font-size: 12px
        border-radius: 1px
        color: rgb(77,85,93)
        &.active
          color: #fff
        .count
          margin-left: 2px
          font-size: 8px
        &.all
          background: rgba(0,160,220,.2)
          &.active
            background-color: rgb(0,160,220)
        &.positive
          background: rgba(0,160,220,.2)
          &.active
            background-color: rgb(0,160,220)
        &.nagative
          background: rgba(77,85,93,.2)
          &.active
            background-color: rgb(77,85,93)
    .switch
      padding:12px 18px
      line-height: 24px
      border-bottom:1px solid rgba(7,17,27,.1)
      color: rgb(147,153,159)
      font-size: 0
      &.on
        .icon-check_circle
          color: rgb(0,200,80)
      .icon-check_circle
        display: inline-block
        vertical-align: top
        margin-right: 4px
        font-size: 24px
      .switch-text
        display: inline-block
        vertical-align: top
        font-size: 12px
</style>
